<template>
  <div>
    <main>
      <!-- 搜索栏 -->
      <div class="search">
        <el-input
          placeholder="请输入姓名"
          prefix-icon="el-icon-search"
          v-model="input_nickname"
        >
        </el-input>

        <el-button type="primary" @click="searchUser" icon="el-icon-search"
          >搜索</el-button
        >
        <el-button
          id="resetbtn"
          type="primary"
          icon="el-icon-refresh"
          @click="toggleSelection()"
          >重置</el-button
        >
      </div>

      <!-- 表格区域 -->
      <el-table
        border
        stripe
        ref="multipleTable"
        :data="studentsList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="40">
        </el-table-column>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          :index="indexMethods"
          width="60"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="nickname"
          label="姓名"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="testTime"
          label="考试时间"
          width="240"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.testTime == null ? "暂无" : scope.row.testTime }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="bzNum"
          label="布置次数"
          width="240"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="zdNum"
          label="已提交次数"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="total"
          label="总题数"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="toWorkList(scope.row.id, scope.row.nickname)"
              >查看作业</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        large
        background
        :page-size="rows"
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      options: [{
        value: '选项1',
        label: '是'
      }, {
        value: '选项2',
        label: '否'
      }],
      value: '', // 是否考过value
      input_email: '', // 邮箱搜索
      input_nickname: '', // 昵称搜索

      studentsList: [],
      multipleSelection: [],
      total: 0,//总题数
      page: 1,
      rows: 20,
      pages: 0, //总页数

    }
  },
  created () {
    this.getStudentList(this.page)
  },
  methods: {
    indexMethods (index) {
      return this.page > 1 ? (this.page - 1) * 20 + index + 1 : index + 1
    },
    // 关键字搜索
    searchUser () {
      console.log(this.input_nickname);
      if (this.input_nickname.trim().length > 0) {
        sendPost(api.getUserWorks, {
          page: this.page,
          rows: 20,
          nickname: this.input_nickname,
        }).then(res => {
          console.log(res.data.list)
          this.studentsList = res.data.list
          this.total = res.data.total
        })
      } else {
        this.$msg.info('请输入姓名字段后点击搜索~')
      }
    },
    toWorkList (userId, nickname) {

      this.$router.push('CheckWork/workList?userId=' + userId + '&nickname=' + nickname)
      sessionStorage.setItem('uname', nickname)
    },
    // 获取学生列表
    getStudentList (page) {
      sendPost(api.getUserWorks, {
        page: page,
        rows: 20
        // nickanme: "123",
      }).then(res => {
        // console.log(res.data)
        this.studentsList = res.data.list
        this.total = res.data.total
      })
    },
    // 取消复选框选择状态
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }

      // 清空输入框
      this.input_nickname = ''
      // 重新获取列表数据
      this.getStudentList(this.page)
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      this.input_nickname = ''
      // 重新获取列表数据
      this.getStudentList(this.page)

    },
    // 当前页码发生改变时触发
    handleCurrentChange (value) {
      this.page = value
      this.getStudentList(this.page)
    },
  }
}
</script>

<style lang="less" scoped>
// 分页器
.el-pagination {
  text-align: center;
  margin-top: 6.25rem;
}
main {
  width: 75rem;
  margin: 0 auto;
  /deep/.el-button--primary {
    background-color: #ff5342;
    border-color: #ff5342;
  }
  .search {
    margin-top: 30px;
    height: 4rem;
    line-height: 4rem;
    background-color: #fff;
    .el-input {
      width: 15.3rem;
      margin-right: 3.3rem;
      border-radius: 50% !important;
      margin-left: 40.875rem;
    }
    .el-button {
      height: 2.5rem;
      margin-left: 2.25rem;
      border: none;
    }
    #pub_work {
      margin-left: 4.5rem;
      margin-right: 0;
    }
    /deep/.el-button--mini,
    .el-button--mini.is-round {
      padding: 0.4375rem 0.4375rem;
    }
  }
}
</style>
